@extends('wap.layout.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: '申请专栏',
                    form: {
                        truename: '',
                        card: '',
                        mobile: "{{ auth()->user()->username }}",
                        material: '',
                        protocol: true,
                        _token:"{{csrf_token()}}"
                    },
                    fileName: '',
                }
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.user.index') }}";
                },
                update() {
                    let that = this;
                    if(!this.form.mobile){
                        this.$toast('请输入手机号');return false;
                    }
                    if(!this.form.truename){
                        this.$toast('请输入姓名');return false;
                    }
                    if(!this.form.card){
                        this.$toast('请输入身份证号码');return false;
                    }
                    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if(!reg.test(this.form.card)){
                        this.$toast('请输入有效的身份证号码');return false;
                    }
                    if(!this.form.material){
                        this.$toast('请上传投稿资料');return false;
                    }
                    if(this.form.protocol === false){
                        this.$toast('请阅读并同意《免责申明》');return false;
                    }
                    $.post("{{ route('wap.user.join') }}",this.form,function(res){
                        if(res.code){
                            that.$toast(res.msg);
                        }else{
                            that.$toast.loading({
                                duration: 0,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                loadingType: 'spinner',
                                message: '提交资料成功'
                            });
                            setTimeout(function(){
                                that.$toast.clear();
                                window.location.href = "{{ route('wap.user.join') }}";
                            }, 2000);
                        }
                    });
                },
                //上传封面
                uploadSuccess(file) {
                    let that = this;
                    const isLt2M = file.file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$toast('文件大小不能超过 2M!');return false;
                    }
                    let params = new FormData(); //创建form对象
                    params.append('file', file.file); //通过append向form对象添加数据//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
                    $.ajax({
                        type: "POST",
                        url: "{{ route('api.upload.file') }}",
                        data: params,
                        cache: false,
                        contentType: false,
                        processData : false,
                        success: function (data) {
                            that.form.material = data.data.path;
                            that.fileName = file.file.name;
                        }
                    });
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main user-detail" id="app" v-cloak>
        <div class="row">
            <van-nav-bar
                    :title="title"
                    left-text=""
                    border
                    fixed="true"
                    left-arrow="false"
                    @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left"/>
            </van-nav-bar>
            <div class="join">
                <div class="join-title text-center">寻找最前沿的思想、开启区块链未来的大师</div>
            </div>
            <div class="col-xs-12 auth-form">
                @if(auth()->user()->column > 0)
                    @if(auth()->user()->column == 1)
                        <p style="font-size: 1.5rem;margin-top: 10rem">您已提交专栏申请，请等待系统审核 </p>
                    @endif
                    @if(auth()->user()->column == 2)
                        <p style="font-size: 1.5rem;margin-top: 10rem">您已经是专栏作者，点击前往 <a style="font-size: 1.5rem;color: #13afe0;" href="{{ route('wap.user.index') }}">个人中心</a></p>
                    @endif
                @else
                    <p><em>*</em>手机号</p>
                    <van-cell-group>
                        <van-field v-model="form.mobile" placeholder="请输入手机号" />
                    </van-cell-group>
                    <p><em>*</em>姓名</p>
                    <van-cell-group>
                        <van-field v-model="form.truename" placeholder="请输入姓名" />
                    </van-cell-group>
                    <p><em>*</em>身份证</p>
                    <van-cell-group>
                        <van-field v-model="form.card" placeholder="请输入身份证号码" />
                    </van-cell-group>
                    <p><em>*</em>投稿材料</p>
                    <van-uploader :after-read="uploadSuccess" accept="*/*">
                        <img src="{{ asset('img/column-upload.png') }}" style="width:4rem;height:4rem;margin-left: 1rem"/>
                        <div class="file" v-if="fileName">@{{ fileName }}</div>
                    </van-uploader>
                    <div class="protocol">
                        <van-checkbox v-model="form.protocol">我已阅读并同意</van-checkbox><a target="_blank" href="{{ route('wap.index.about',['id'=>1]) }}">《免责申明》</a>
                    </div>
                    <p class="form-submit" style="margin-top: 2rem">
                        <van-button type="default" @click="update()">提交资料</van-button>
                    </p>
                @endif
            </div>
        </div>
    </div>
@endsection

